<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'Person',
        setup() {
            // setup函数里，this是undefined，Vue3中弱化了this

            // data
            // 注意，此时的name、age、tel都不是响应式的
            let name = '张三';
            let age = 18;
            let tel = '13888888888';

            // methods
            function changeName() {
                // 通过按钮确实可以调用到这里，name也改了，但因为name不是响应式的，所以页面不会刷新
                name = 'zhang-san'
            }

            function changeAge() {
                // 通过按钮确实可以调用到这里，age也改了，但因为age不是响应式的，所以页面不会刷新
                age += 1
            }

            function showTel() {
                alert(tel)
            }

            // 将数据、方法交出去之后，才能在模板中去使用
            // return {name, age, changeName, changeAge, showTel}

            // setup函数的返回值也可以是一个匿名函数，但会替换template的内容
            return () => 'Haha'
        }
    }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px
    }
    button {
        margin: 0 5px;
    }
</style>